<!DOCTYPE html>
<html>

<head>
    <title>选择题</title>
    <style>
        body {
            padding: 0 100px;
        }

        div {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>

    <h1>选择题</h1>

    <main id="main"></main>



    <button onclick="submitAnswers()">提交答案</button>
    <h3 class="h3"></h3>

    <p id="score"></p>
    <script src="./form-serialize.js"></script>
    <script>

        const list = [
            {
                id: '001',
                titile: '在下列哪个选项中，typeof 返回的值为 "object"？',
                options: [
                    { op: 'A', value: 'null' },
                    { op: 'B', value: 'undefined' },
                    { op: 'C', value: 'function' },
                    { op: 'D', value: 'string' }
                ]
            },
            {
                id: '002',
                titile: '下列哪个方法可以用于删除一个对象的属性？',
                options: [
                    { op: 'A', value: 'object.remove(property)' },
                    { op: 'B', value: 'object.delete(property)' },
                    { op: 'C', value: 'delete object.property' },
                    { op: 'D', value: 'object.pop(property)' }
                ]
            },
            {
                id: '003',
                titile: '下列哪个方法可以用于在数组的末尾添加一个新元素？',
                options: [
                    { op: 'A', value: 'array.add(newElement)' },
                    { op: 'B', value: 'array.insert(newElement)' },
                    { op: 'C', value: 'array.push(newElement)' },
                    { op: 'D', value: 'array.unshift(newElement)' }
                ]
            }
        ]
        const answer = {
            '001': 'A',
            '002': 'C',
            '003': 'C'
        }



        function renderT() {
            const main = document.querySelector('#main')
            const tit = list.map(item => {
                return `
                <h3>${item.titile}</h3>
                ${item.options.map(items => {
                    return `
                    <input type="radio" name=${item.id} value =${items.op}>${items.op}.${items.value}
                    `
                }).join('')}
                `
            }).join('')
            main.innerHTML = `<form action="" class="form"> ${tit}</form>`
        }
        renderT()
        function submitAnswers() {
            const data = serialize(document.querySelector('.form'),{hash:true})
            var f = 0
            for (let k in answer) {
                if(answer[k] == data[k]) {
                   f += 10
                }  
            } 
            const h3 = document.querySelector('.h3')
            console.log(h3);
            h3.innerHTML = `${f}分`

        }


        
    </script>

</body>

</html>